<template>
  <div class="login-page">
    <div class="login-box">
      <p class="title">👨‍🏫vue3-mentor-selection👨‍🎓</p>
      <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit" :rules="rules">
        <t-form-item name="account">
          <t-input v-model="formData.account" clearable placeholder="请输入学号/学工号">
            <template #prefix-icon>
              <desktop-icon/>
            </template>
          </t-input>
        </t-form-item>
        <t-form-item name="password">
          <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
            <template #prefix-icon>
              <lock-on-icon/>
            </template>
          </t-input>
        </t-form-item>
        <t-form-item style="padding-top: 8px">
          <t-button theme="primary" type="submit" block>登录</t-button>
        </t-form-item>
      </t-form>
    </div>
    <TipBox></TipBox>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue';
import {MessagePlugin} from 'tdesign-vue-next';
import {DesktopIcon, LockOnIcon} from 'tdesign-icons-vue-next';
import { login } from "../../api";
import { useRouter } from "vue-router";
import { useStore } from "../../store/idnex";
import TipBox from "./TipBox.vue";

const INITIAL_DATA = {
  account: '',
  password: '',
};

export default defineComponent({
  components: {
    DesktopIcon,
    LockOnIcon,
    TipBox
  },
  setup() {
    const router = useRouter();
    const store = useStore();
    const formData = ref({...INITIAL_DATA});

    const onReset = () => {
      MessagePlugin.success('重置成功');
    };

    const onSubmit = () => {
      if(!formData.value.account || !formData.value.password){
        return;
      }
        login(formData.value).then(res=>{
          if(res.data.code === 1){
            MessagePlugin.success(res.data.msg);
            //存入sessionStorage中，防止刷新清空
            sessionStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
            sessionStorage.setItem("token", res.data.token);
            sessionStorage.setItem("menu", JSON.stringify(res.data.menu));
            sessionStorage.setItem("userType", res.data.userType);
            router.push('/');
          }else{
            MessagePlugin.error(res.data.msg);
          }
        })
    };

    //规则校验
    const rules = {
      account: [
        {required: true, message: '还没填写账号呢！', type: 'error'},
      ],
      password: [
        {required: true, message: '还没填写密码呢！', type: 'error'},
      ],
    }

    return {
      formData,
      onReset,
      onSubmit,
      rules
    };
  },
});
</script>

<style scoped>
.login-page {
  min-height: 100vh;
  width: 100%;
  background-image: url("../../../public/img/login-bg.webp");
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 350px;
  background-color: white;
  padding: 10px;
  transform: translateY(-50px);
}

.login-box .title {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
}
</style>
